package top.mcwebsite.playandroid.business.qa.ui

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import top.mcwebsite.lib.route.api.EasyRouter
import top.mcwebsite.lib.router.annotation.Param
import top.mcwebsite.lib.router.annotation.Route
import top.mcwebsite.playandroid.business.qa.model.QAReplayComment
import top.mcwebsite.playandroid.business.qa.utils.stringToColor
import top.mcwebsite.playandroid.common.constant.RouteConfig
import top.mcwebsite.playandroid.common.constant.RouteConfig.Answer
import top.mcwebsite.playandroid.lib.markdown.Markdown

@Route("${Answer.PATH}/{${Answer.Param.QA_ID}}/{${Answer.Param.INDEX}}?${Answer.Param.QUESTION}={${Answer.Param.QUESTION}}")
@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun AnswerPage(
    @Param(Answer.Param.QA_ID) qaId: Int,
    @Param(Answer.Param.QUESTION) question: String,
    @Param(Answer.Param.COMMENTS) replyComments: java.util.ArrayList<QAReplayComment>,
    @Param(Answer.Param.INDEX) index: Int = 0,
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Column {
                        Text(
                            text = question,
                            maxLines = 1,
                            overflow = TextOverflow.Ellipsis,
                            style = MaterialTheme.typography.titleMedium
                        )
                        Text(text = "${replyComments.size} 回答", style = MaterialTheme.typography.labelMedium)
                    }
                },
                navigationIcon = {
                    IconButton(onClick = {
                        EasyRouter.popBackStack()
                    }) {
                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = null)
                    }
                },
            )
        }
    ) {
        val pageState = rememberPagerState(initialPage = index) {
            replyComments.size
        }
        VerticalPager(
            state = pageState,
        ) { pageIndex ->
            val comment = replyComments[pageIndex]
            LazyColumn(
                modifier = Modifier
                    .padding(it)
                    .fillMaxHeight()
            ) {
//                item {
                // TODO 这里可以和 AppBar 做联动
//                    Text(
//                        text = question,
//                        style = MaterialTheme.typography.titleLarge,
//                        modifier = Modifier
//                            .padding(horizontal = 10.dp)
//                            .fillMaxWidth()
//                    )
//                    Divider(modifier = Modifier.padding(vertical = 5.dp, horizontal = 10.dp))
//                }
                item {
                    UserInfo(
                        name = comment.userName,
                        publishData = comment.niceDate,
                        modifier = Modifier.padding(horizontal = 10.dp)
                    )
                    Divider(modifier = Modifier.padding(vertical = 5.dp, horizontal = 10.dp))
                }
                item {
                    Markdown(comment.contentMd, modifier = Modifier.padding(horizontal = 10.dp))
                }
                item {
                    CommentHeader(comment = comment, modifier = Modifier.padding(horizontal = 10.dp))
                }
                comment.replyComments.filter { it.replyCommentId == comment.id }.forEach { replyComment ->
                    item {
                        Comment(comment = replyComment, modifier = Modifier.padding(horizontal = 10.dp))
                    }
                    comment.replyComments.filter { it.replyCommentId == replyComment.id }.forEach {
                        item {
                            Comment(
                                comment = it,
                                modifier = Modifier
                                    .padding(start = 52.dp, end = 10.dp)
                                    .padding(vertical = 5.dp)
                            )
                        }
                    }
                }
                item { Spacer(modifier = Modifier.height(20.dp)) }
            }
        }

    }

}

@Composable
fun FakeAvatar(name: String, modifier: Modifier) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier
            .background(color = stringToColor(name), shape = CircleShape),
    ) {
        // TODO Text 大小使用 size 控制
        Text(text = name.substring(0, 1), color = Color.White, style = MaterialTheme.typography.titleLarge)
    }
}

@Composable
private fun UserInfo(name: String, publishData: String, modifier: Modifier) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = modifier
    ) {
        FakeAvatar(name = name, modifier = Modifier.size(48.dp))
        Column(
            modifier = Modifier.padding(start = 10.dp),
        ) {
            Text(text = name, style = MaterialTheme.typography.titleMedium, modifier = Modifier.padding(bottom = 2.dp))
            Text(text = publishData, style = MaterialTheme.typography.labelMedium)
        }
    }
}

